<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设置</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <style>
      .search-box{
        border: 1px solid #6722ff;
        height: 25px;
        border-radius: 12.5px;
      }

      .search-box input{
        border: none;
        outline: none;
        height: 100%;
        width: 100%;
        background-color: transparent;
        padding: 0 10px;
        color: #777980;
      }

      .company-list{
        padding: 5px;
      }

      .company-item{
        display: inline-block;
        border: 1px solid #3b2961;
        padding: 5px;
        margin: 5px;
        
      }

      .company-item.active{
        background-color: #3b2961;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <tab-win>
      <div class="notice">注意：顺丰速运需在单号后添加手机号后四位。</div>
      <div class="search-box">
        <input type="text" placeholder="输入查询单号">
      </div>
      <div class="company-list">

      </div>
    </tab-win>
  </body>
  <script type="module" async>
    import TabWin from "../components/Window.js";
    customElements.define("tab-win", TabWin);

    let data = {
      id: '',
      code: ''
    };

    const companyListEl = document.querySelector(".company-list");
    const searchInput = document.querySelector(".search-box input");


    let res = await fetch("../common/assets/data/pack.json");
    let packList = await res.json();
    const renderPackList = () => {
      packList.forEach(item=>{
        let span = document.createElement("span");
        span.className = "company-item";
        span.innerText = item.name;
        span.setAttribute('value', item.code);
        span.onclick = (e)=>{
          document.querySelectorAll('.company-item').forEach(item=>{
            item.classList.remove('active')
          })
          data.code = e.target.getAttribute('value')
          span.classList.add('active')
          if(data.id){
            sendParent()
          }
        }
        companyListEl.appendChild(span)
      })
    }

    const sendParent = () => {
      if(window.toParentPage){
        window.toParentPage(data)
      }
    }

    // searchInput.onchange = function (e){
    //   data.id = e.target.value;
    //   sendParent()
    // }
    
    searchInput.onkeydown = function (e){
      if(e.keyCode === 13){
        data.id = e.target.value;
        sendParent()
      }
    }

    renderPackList()
  </script>
</html>
